// 获取元素节点
var total=document.getElementById('total')
var branch=document.getElementById('branch')
var totalnumber=document.getElementById('totalnumber')
var mengban=document.getElementById('mengban')
var idom=document.getElementById("bgcolor")
var idom1=document.getElementById('begin')

console.log(idom1);
var money=document.getElementsByClassName('money')[0]

console.log(money);
var time=document.getElementById('second')

console.log(time);
var number1=0

var second=15
time.innerHTML=`倒计时:${second}`
idom1.addEventListener('click',function(){
   mengban.style.display='none'
    idom1.style.display="none"
    let compute=setInterval(function(){
    second--
    time.innerHTML=`倒计时:${second}`
    if(second==0){
        clearInterval(compute)
        clearInterval(timerss)
       canvas.style.display='none'
        mengban.style.display=""
        totalnumber.style.display='block'
    }
},1000)



})
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');
let w = canvas.width =window.innerWidth;//把窗口的宽度赋值给画布
let h = canvas.height =window.innerHeight;//把窗口的高度赋值给画布


let width=window.innerWidth-30
console.log(width)
 //浏览器窗口改变的时候重新获取宽度
 window.onresize =function(){
     w = canvas.width = window.innerWidth;
     h = canvas.height = window.innerHeight;
     
     console.log(w,h)
 }
 

// canvas代码
var ArrowImg = new Image()
ArrowImg.src ='./images/redpacket2.png'

console.log(ArrowImg)
 
class Arrow {
	constructor() {
		this.vx = this.randomInt(0, w-100)
		this.vy = -100
		this.speed = this.randomInt(10, 12)
		this.height = this.randomInt(80, 100)
		this.width = this.randomInt(80, 100)
		this.ArrowImg = ArrowImg
 
	}
	randomInt(from, to) {
		return parseInt(Math.random() * (to-from) + from);
	}
	drawArrow() {
		ctx.beginPath();
        ctx.drawImage(this.ArrowImg, this.vx, this.vy, 100, 100);
		ctx.save()
	}
	move() {
		this.vy += this.speed
	}
  get xy(){
		return {
			vx:this.vx,
			vy:this.vy,
			height:this.height,
			width:this.width
		}
	}
}
 
 
 

// 定义数组接收内容
var arrows = []

// 一秒打印一次
let timer=setInterval(function(){
    let _arrow = new Arrow();
	arrows.push(_arrow)
},1000)
 let timerss=setInterval(function() {
	
	ctx.clearRect(0, 0, w, h)
	for(let i = 0;i<arrows.length; i++){
		arrows[i].drawArrow()
		arrows[i].move()
    
	}
}, 60)
// 定义金币钱数
 let count=0
canvas.onclick = function(e){
	let x = e.offsetX;
	let y = e.offsetY;
    for(let i = 0;i<arrows.length; i++){
            let _x = arrows[i].xy.vx
            let _y = arrows[i].xy.vy
            let _height = arrows[i].xy.height
            let _width = arrows[i].xy.width
            if(y > _y && y < _y+_height && x> _x  && x < _x+_width){
                    arrows.splice(i,1)
                    //显示金币数额
                    var money = Math.ceil(Math.random()*10)
                    count+=money
                    total.innerText = count
                    branch.innerText=`+${money}`
                    totalnumber.innerText=`总金额:${count}`
     
        
                }
                
        
            }

}